<template>
    <div class="edit_container">
        <p>用户名：<input type="text" v-model="name"></p>
        <p>商品价格：<input type="text" v-model="price"></p>
        <p>商品颜色：<input type="text" v-model="color"></p>
        <p>商品数量：<input type="text" v-model="number"></p>
        <p>商品尺码：<input type="text" v-model="size"></p>
        <p>商品版本：<input type="text" v-model="version"></p>
    <quill-editor
        v-model="content"
        ref="myQuillEditor"
        :options="editorOption"
        @focus="onEditorFocus($event)" @blur="onEditorBlur($event)"
        @change="onEditorChange($event)">
    </quill-editor>
        <p><button @click="post_info()">提交</button></p>
        <div :v-html="str" class="ql-editor">
            {{str}}
        </div>
        {{str}}
    </div>
</template>

<script>
import axios from 'axios'
import {send_fuwenben,fuwenben_user_show} from '../axios_send/api.js'
import { quillEditor } from 'vue-quill-editor' // 调用富文本编辑器
import 'quill/dist/quill.snow.css' // 富文本编辑器外部引用样式  三种样式三选一引入即可
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.bubble.css'
// import * as Quill from 'quill'; // 富文本基于quill
export default {
    name:"fuwenben",
    components:{
        quillEditor
    },
    data(){
        return{
            name:"",
            price:"",
            color:"",
            number:"",
            size:"",
            version:"",
            str:"",
            content:'<p></p><p><br></p><ol></ol>',
            editorOption:{},

        }
    },
    methods:{
        // 准备富文本编辑器
        onEditorReady (editor) {},
        // 富文本编辑器 失去焦点事件
        onEditorBlur (editor) {},
        // 富文本编辑器 获得焦点事件
        onEditorFocus (editor) {},
        // 富文本编辑器 内容改变事件
        onEditorChange (editor) {},
        post_info(){
            var data={
                "name":this.name,
                "price":this.price,
                "color":this.color,
                "number":this.number,
                "size":this.size,
                "version":this.version,
                "content":this.content
            }
            send_fuwenben(data).then(res=>{
                console.log(res)
            })
        },
        sss(){
        fuwenben_user_show()
        .then(res=>{
                if(res.code==200){
                    console.log(res)
                    this.str=res.data
                }
            })
        }
    },
    created(){
        this.sss()
    },
    computed:{
        editor() {
            return this.$refs.myQuillEditor.quill;
        }
    }
}
</script>

<style>

</style>
